<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg  time</title>
    <style>
        svg{
            background-color: black;
        }

        svg path{
            stroke: rgb(253, 66, 66);
            stroke-width: 5;
        }

        svg path{
            transition: d 0.2s ease-in-out;
        }
    </style>
</head>
<body>
    <svg width="1000" height="500">
        <path id="num_path" d="M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0" transform="translate(300,100)"/>
    </svg>
    <script>
        let numbers = [
            'M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0',
            'M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100',
            'M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100',
            'M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50',
            'M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100',
            'M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100',
            'M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50',
            'M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100',
            'M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50',
            'M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50'
        ];
        let i = 0;
        let svgDoom = document.querySelector("#num_path")
        setInterval(function(){
            i++;
            if(i >= 10) i = 0;
            svgDoom.setAttribute('d',numbers[i])
        },1000)
    </script>
</body>
</html>